<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <title>gulimall注册页面</title>
    <script src="/static/register/libs/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/register/js/jQuery/jquery-3.1.1.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/register/bootStrap/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="/static/register/sass/index.css"/>
    <link rel="stylesheet" type="text/css" href="/static/register/css/index.css">


</head>

<body>
<header>
    <a href="http://swinw.com"
       class="logo"><img src="/static/register/img/logo1.jpg" alt=""></a>
    <div class="desc">欢迎注册</div>
    <div class="dfg">
        <span>已有账号？</span>
        <a href="http://auth.swinw.com/login.html">请登录</a>
    </div>
</header>
<section>
    <form action="/userRegister" class="one" method="post">
        <div class="register-box">
            <label for="username" class="username_label">用 户 名
                <input maxlength="20" id="username" name="username" type="text" placeholder="您的用户名和登录名">
            </label>
<!--            th:text="${error!=null&&(#maps.containsAllKeys(error,'username'))?error.get('username'):''}"-->
            <div class="tips" th:attr="style='color:red'"  th:text="${!#strings.isEmpty(username)?username:''}">

            </div>
        </div>
        <div class="register-box">
            <label for="password" class="other_label">设 置 密 码
                <input maxlength="20" type="password" id="password" name="password" placeholder="建议至少使用两种字符组合">
            </label>
            <div class="tips" th:attr="style='color:red'" th:text="${!#strings.isEmpty(password)?password:''}">

            </div>
        </div>
        <div class="register-box">
            <label for="password1" class="other_label">确 认 密 码
                <input maxlength="20" type="password" id="password1" name="password1" placeholder="请再次输入密码">
            </label>
            <div class="tips">

            </div>
        </div>
        <div class="register-box">
            <label for="mobile" class="other_label">
                <span>中国 0086∨</span>
                <input class="phone" id="mobile" name="mobile" maxlength="20" type="text" placeholder="建议使用常用手机">
            </label>
            <div class="tips" th:attr="style='color:red'" th:text="${!#strings.isEmpty(mobile)?mobile:''}">

            </div>
        </div>
        <div class="register-box">
            <label for="" class="other_label">验 证 码
                <input maxlength="20" type="text" name="code" placeholder="请输入验证码" class="caa">
            </label>
            <span id="getCode" style="height: 42px;border-right: none;cursor: pointer;">获取验证码</span>
            <div class="tips" th:attr="style='color:red'" th:text="${!#strings.isEmpty(code)?code:''}">

            </div>
        </div>
        <div class="arguement">
            <input type="checkbox" id="xieyi"> 阅读并同意
            <a href="/static/register/#">《校园二手商城用户注册协议》</a>
            <a href="/static/register/#">《隐私政策》</a>

            <br/>
            <div class="submit_btn">
                <button type="submit" id="submit_btn">立 即 注 册</button>
            </div>
        </div>

    </form>
    <div class="two">
        <div class="right_r">
            <div class="right_r1">
                <img src="/static/register/img/a65a18e877a16246a92e1b755bd88a03_03.png"/>
                <span>企业用户注册</span>
            </div>
            <div class="right_r2">
                <img src="/static/register/img/a65a18e877a16246a92e1b755bd88a03_06.png"/>
                <span>INTERNATIONAL <br/> CUSTOMERS</span>
            </div>
        </div>
    </div>
</section>
<br/><br/>
<hr>
<div class="footer">
    <ul>
        <li>
            <a href="/static/register/">关于我们</a>
        </li>
        <li>|</li>
        <li>
            <a href="/static/register/">联系我们</a>
        </li>
        <li>|</li>
        <li>
            <a href="/static/register/">人次招聘</a>
        </li>
        <li>|</li>
        <li>
            <a href="/static/register/">商家入驻</a>
        </li>
        <li>|</li>
        <li>
            <a href="/static/register/">广告服务</a>
        </li>
        <li>|</li>
        <li>
            <a href="/static/register/">手机校园二手商城</a>
        </li>
        <li>|</li>
        <li>
            <a href="/static/register/">友情链接</a>
        </li>
        <li>|</li>
        <li>
            <a href="/static/register/">销售联盟</a>
        </li>
        <li>|</li>
        <li>
            <a href="/static/register/">校园二手商城社区</a>
        </li>
        <li>|</li>
        <li>
            <a href="/static/register/">校园二手商城公益</a>
        </li>
        <li>|</li>
        <li>
            <a href="/static/register/">English Site</a>
        </li>
    </ul>
</div>
<p class="bq">Copyright©2004-2016 校园二手商城gulimall.com 版权所有</p>
<br/><br/>
<script>
    // 	验证码
    $("#getCode").click(function(){
        var url = "http://auth.swinw.com/sendCode";
        $.get(url,{"phone":$("#mobile").val()},function(data){
            if(data.sendCode != null && data.sendCode.length > 0){
                $("#youCode").val(data.sendCode);
            }
        });
        if($(this).hasClass("disabled")){
            //正在倒计时
        }else{
            timeoutChangsStyle();
        }
    });
    //样式
    var num = 60;
    function timeoutChangsStyle(){
        $("#getCode").attr("class","disabled");
        if(num == 0){
            $("#getCode").text("发送验证码");
            num = 60;
            $("#getCode").attr("class","");
        }else{
            var text = num + "s后再获取";
            $("#getCode").text(text);
            setTimeout("timeoutChangsStyle()",1000);
        }
        num--;
    }
</script>
<script type="text/javascript" charset="utf-8">
    $(function () {
        //聚焦失焦input
        $('input').eq(0).focus(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("支持中文，字母，数字，'-'，'_'的多种组合");
            }
        })
        $('input').eq(1).focus(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("建议使用字母、数字和符号两种以上的组合，6-20个字符");
            }
        })
        $('input').eq(2).focus(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("请再次输入密码");
            }
        })
        $('input').eq(3).focus(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("验证完后，你可以使用该手机登陆和找回密码");
            }
        })
        $('input').eq(4).focus(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next().next("div").text("看不清？点击图片更换验证码");
            }
        })
        //input各种判断
        //用户名：
        $('input').eq(0).blur(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("");
                $(this).parent().next("div").css("color", '#ccc');
            } else if ($(this).val().length > 0 && $(this).val().length < 4) {
                $(this).parent().next("div").text("长度只能在6-20个字符之间");
                $(this).parent().next("div").css("color", 'red');
            } else if ($(this).val().length >= 4 && !isNaN($(this).val())) {
                $(this).parent().next("div").text("用户名不能为纯数字");
                $(this).parent().next("div").css("color", 'red');
            } else {
                for (var m = 0; m < stuList.length; m++) {
                    if ($(this).val() == stuList[m].name) {
                        $(this).parent().next("div").text("该用户名已被注册");
                        $(this).parent().next("div").css("color", 'red');
                        return;
                    }
                }
                $(this).parent().next("div").text("");
            }
        })
        //密码
        $('input').eq(1).blur(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("");
                $(this).parent().next("div").css("color", '#ccc');
            } else if ($(this).val().length > 0 && $(this).val().length < 6) {
                $(this).parent().next("div").text("长度只能在6-20个字符之间");
                $(this).parent().next("div").css("color", 'red');
            } else {
                $(this).parent().next("div").text("");
            }
        })
        //	确认密码
        $('input').eq(2).blur(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("");
                $(this).parent().next("div").css("color", '#ccc');
            } else if ($(this).val() != $('input').eq(1).val()) {
                $(this).parent().next("div").text("两次密码不匹配");
                $(this).parent().next("div").css("color", 'red');
            } else {
                $(this).parent().next("div").text("");
            }
        })
        //	手机号
        $('input').eq(3).blur(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("");
                $(this).parent().next("div").css("color", '#ccc');
            } else if ($(this).val().length != 11) {
                $(this).parent().next("div").text("手机号格式不正确");
                $(this).parent().next("div").css("color", 'red');
            } else {
                $(this).parent().next("div").text("");
            }
        })


    })
    $(".ty").click(function () {
        $(".zong").hide();
        $(".laoda").hide();
    });
    $(".cuo").click(function () {
        $(".zong").hide();
    });
</script>
</body>

</html>
